<template>
    <el-table-column :label="column.label" :align="column.align" :prop="column.prop" :key="index"
                     :render-header="column.renderHeader" :class-name="column.className"
                     :label-class-name="column.labelClassName" :fixed="column.fixed">
        <template v-for="(child, cIndex) in column.children">
            <children-column v-if="child.children && child.children.length > 0" :key="cIndex" :index="cIndex" :col="child" :edit="edit" />
            <table-column v-else :key="cIndex" :index="cIndex" :col="child" :edit="edit"/>
        </template>
    </el-table-column>
</template>

<script>
    import TableColumn from "./TableColumn";
    export default {
        name: "ChildrenColumn",
        components: {TableColumn},
        props: {
            col: {
                type: Object,
                default () {
                    return {};
                },
            },
            index: {
                type: Number,
                default () {
                    return -1;
                },
            },
            edit: {
                type: Boolean,
                default() {
                    return true;
                },
            },
        },
        data () {
            return {
                column: {},
            };
        },
        watch: {
            col: {
                handler () {
                    this.init();
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            init () {
                this.column = $.extend({}, this.col);
                if (typeof this.column.label === 'number') {
                    this.column = $.extend({}, this.column, {
                        label: String(this.column.label),
                    });
                }
            },
        },
    }
</script>

<style scoped>

</style>
